import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';

import {TabBar} from 'antd-mobile';
// 引入组件
import Home from '../home'
import HouseList from '../houseList';
import News from '../news';
import Profile from '../profile';

import './index.css'

const TABBARLIST = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/house-list' },
  { title: '资讯', icon: 'icon-inform', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' }
];

class TenancyTabBar extends React.Component {
  state = {
    selectedTab: this.props.location.pathname,
    noRenderContent: true
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
      const prevPath = prevProps.location.pathname
      const pathname = this.props.location.pathname
      if (prevPath !== pathname) {
          this.setState({
              selectedTab: pathname
          })
      }
  }

  renderTabBarItem() {
    const tabList = TABBARLIST.map(item =>
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} ></i>}
        selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          })
          this.props.history.push(item.path)
        }}
        data-seed="logId"
      >
      </TabBar.Item>
    )
    return (tabList)
  }

  render() {
    return (
      <div className="app-container">
        <div className="content-wrapper">
          <Route exact path={'/home'} component={Home}></Route>
          <Route path={'/home/house-list'} component={HouseList}></Route>
          <Route path={'/home/news'} component={News}></Route>
          <Route path={'/home/profile'} component={Profile}></Route>
        </div>
        <Router>
          <div className="bar-wrapper">
            <TabBar
              unselectedTintColor="#949494"
              tintColor="#33A3F4"
              barTintColor="white"
              noRenderContent={this.state.noRenderContent}
            >
              {this.renderTabBarItem()}
            </TabBar>
          </div>
        </Router>
      </div>
    );
  }
}
export default TenancyTabBar
